<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>品牌管理</title>
	<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
	<link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
	<link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
	<link rel="stylesheet" href="../css/style.css">
	<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
	<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" th:inline="none">

		$(function () {
			getBrand();
		})
		function getBrand() {
			$.ajax({
				url: "/brand/getBrand",
				type: "post",
				async: false,//同步
				dataType: "json",
				success: function (result) {
					var branfList = result.data;
					var table = '<table id="dataList" class="table table-bordered table-striped table-hover dataTable">';
					table += '<thead><tr><th class="" style="padding-right:0px"><input id="selall" type="checkbox" class="icheckbox_square-blue"></th>'
					table += '<th class="sorting_asc">品牌ID</th><th class="sorting">品牌名称</th><th class="sorting">品牌首字母</th>';
					table += '<th class="text-center">操作</th></tr></thead><tbody>';

					$.each(branfList,function (i,v) {
						table += '<tr><td><input name="box" type="checkbox" value="'+ v.id +'"></td><td>'+ v.id +'</td><td>'+ v.name +'</td>';
						table += '<td>'+ v.firstChar +'</td><td class="text-center">';
						table += '<button type="button" onclick="toUpdate('+ v.id +')" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal"  >修改</button></td></tr>';
					})
					table += '</tbody></table>';
					$("#tableId").html(table);
				},
				error: function () {
					alert.error("系统错误，请联系管理员！");0
				}
			})
		}
		/* 增加 */
		function addBrand() {
			var name =$("#addName").val();
			var firstChar = $("#addFirstChar").val()
			$.ajax({
				url:"/brand/addBrand",
				data:{name:name,firstChar:firstChar},
				dataType:"json",
				type:"post",
				async:true,
				success:function(result){
					alert(result.message);
					window.location.reload();
				},
				error:function(){
					alert("系统错误，请联系管理员");
				}
			})
		}
		/* 修改回显 */
		function toUpdate(id) {
			$.ajax({
				url:"/brand/getBrandById",
				data:{id:id},
				dataType:"json",
				type:"post",
				async:false,
				success:function(result){
					var brand = null;
					if (result.code == 200){
						brand = result.data;
					}

					$("#updateBrandId").val(brand.id);
					$("#updateBrandName").val(brand.name);
					$("#updateBrandFirstChar").val(brand.firstChar);
				},
				error:function(){
					alert("系统错误，请联系管理员");
				}
			})
		}

		/* 修改数据 */
		function updateBrand() {
			var id = $("#updateBrandId").val()
			var name = $("#updateBrandName").val()
			var firstChar = $("#updateBrandFirstChar").val()
			$.ajax({
				url:"/brand/updateBrandById",
				data:{id:id,name:name,firstChar:firstChar},
				dataType:"json",
				type:"post",
				async:true,
				success:function(result){
					alert(result.message);
					window.location.reload();
				},
				error:function(){
					alert("系统错误，请联系管理员");
				}
			})
		}


		/* 删除数据 */
		function deleteBrandById() {
			var boxs = $("input[name=box]:checked")
			var ids = [];
			$(boxs).each(function (i,e) {
				ids.push(e.id);
			})
			if (ids.length<=0){
				alert("请选择删除的品牌");
			}
			if (confirm("确定删除id为"+ ids +"的品牌？")) {

				$.ajax({
					url:"/brand/deleteBrandByIds",
					data:{ids:ids},
					type:"post",
					dataType:"json",
					async:true,
					success:function(result){
						alert(result.message);
						window.location.reload();

					},
					error:function(){
						alert("删除失败");
					}
				})
			}
		}

	</script>
</head>
<body>

<div class="box-header with-border">
	<h3 class="box-title">品牌管理</h3>
</div>
<div class="box-body">

	<!-- 数据表格 -->
	<div class="table-box">

		<!--工具栏-->
		<div class="pull-left">
			<div class="form-group form-inline">
				<div class="btn-group">
					<button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#addModal" ><i class="fa fa-file-o"></i> 新建</button>
					<button type="button" class="btn btn-default" title="删除" onclick="deleteBrandById()"><i class="fa fa-trash-o"></i> 删除</button>
					<button type="button" class="btn btn-default" title="刷新" th:onclick="getBrand()"><i class="fa fa-refresh"></i> 刷新</button>
				</div>
			</div>
		</div>
		<div class="box-tools pull-right">
			<div class="has-feedback">
			</div>
		</div>
		<!--工具栏/-->
		<!--数据列表-->
		<div th:id="tableId"></div>
	</div>
	<!-- 数据表格 /-->
</div>

<!-- 添加编辑窗口 -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog" >
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h3 id="">品牌编辑</h3>
			</div>
			<div class="modal-body">
				<table class="table table-bordered table-striped" id="addBrand"  width="800px">
					<tr>
						<td>品牌名称</td>
						<td><input  class="form-control" placeholder="品牌名称" id="addName">  </td>
					</tr>
					<tr>
						<td>首字母</td>
						<td><input  class="form-control" placeholder="首字母" id="addFirstChar">  </td>
					</tr>
				</table>
			</div>
			<div class="modal-footer">
				<button class="btn btn-success" data-dismiss="modal" aria-hidden="true" th:onclick="addBrand()">保存</button>
				<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
			</div>
		</div>
	</div>
</div>
<!-- 修改窗口 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog" >
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h3 id="myModalLabel">品牌编辑</h3>
			</div>
			<div class="modal-body">
				<table class="table table-bordered table-striped"  width="800px">
					<tr>
						<td>品牌名称</td>
						<td>
							<input  class="form-control" placeholder="品牌ID" id="updateBrandId" type="hidden">
							<input  class="form-control" placeholder="品牌名称" id="updateBrandName" >
						</td>
					</tr>
					<tr>
						<td>首字母</td>
						<td><input  class="form-control" placeholder="首字母" id="updateBrandFirstChar">  </td>
					</tr>
				</table>
			</div>
			<div class="modal-footer">
				<button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="updateBrand()">保存</button>
				<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
			</div>
		</div>
	</div>
</div>
</body>
</html>